import React, { PropTypes, Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import {Tabs, Tab} from 'material-ui/Tabs';
import Dialog from 'material-ui/Dialog';
import Page from './Page'
import SiteDrawer from './SiteDrawer'
import ImageModal from './ImageModal'
import WidgetMenu from './WidgetMenu'


/**
 * 选择背景图对话框的样式
 * @type {Object}
 */
const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400
  }
}




class Container extends Component {
  constructor(props, context) {
    super(props, context)
    this.state={
      drawerOpen:false,
      dialogImgOpen:false,
      currentPageId:0,
      currentWidgetId:0,
      widgetMenuOpen:false
    }
  }
  handleDrawerToggle = () => this.setState({drawerOpen: !this.state.drawerOpen});
  handleDialogImgToggle(id){
     this.setState({dialogImgOpen:!this.state.dialogImgOpen,currentPageId:id});
  }
  
  
  handleDialogClose=() => this.setState({dialogImgOpen:false});
  
  handleWidgetMenuShow(e,widgetPageId=0,widgetSectionId=0){
    // console.log(e.nativeEvent.offsetY,widgetPageId,widgetSectionId)

    this.setState({currentPageId:widgetPageId,currentWidgetId:widgetSectionId,widgetMenuOpen:!this.state.widgetMenuOpen})
   }

  
  render() {
    const { components, actions } = this.props
    let currentPageId=this.state.currentPageId
    let currentWidgetId=this.state.currentWidgetId
    const componentStyles=components[this.state.currentPageId].styles
    let  widget= components[currentPageId].widgets[currentWidgetId]||{}
    const componentsList=[
      {
        positionId:0,
        id:1, 
        cptType:1,
        elHeight: 300,
        backgroundImage:'',
        backgroundColor:'#ccc',
        cptName:'banner组件一',
        logoSrc:'http://img2.kunming.cn/zhuanti/myStrikingly/static/banner1.jpg'

      },

      {
        positionId:0,
        id:2,
        cptType:1,
        elHeight: 300,
        backgroundImage:'',
        backgroundColor:'#ccc',
        cptName:'头图组件一',
        logoSrc:'http://img2.kunming.cn/zhuanti/myStrikingly/static/banner2.jpg'

      }
    ]

    return (
     <div>
     
        <div className="btn-allsite">
          <RaisedButton
            label="全局设置"
            onTouchTap={this.handleDrawerToggle}
          />
        </div>


        <SiteDrawer
            components={ components }  
            componentsList={ componentsList } 
            actions={actions} 
            drawerOpen={this.state.drawerOpen}
            handleDrawerToggle={this.handleDrawerToggle.bind(this)}
        />



        <Page  components={components}
               actions={ actions }
               handleDialogImgToggle={this.handleDialogImgToggle.bind(this)}
               handleWidgetMenuShow={this.handleWidgetMenuShow.bind(this)}
         />
         <Dialog
            modal={false}
            bodyStyle={{paddingBottom:400}}
            open={this.state.dialogImgOpen}
            onRequestClose={this.handleDialogClose}
            autoScrollBodyContent={true}
        >
        <h2><RaisedButton label="添加一张背景图" secondary={true} style={{margin:2}} /></h2>
         <Tabs
           >
        <Tab label="banner图库" value="a" >
          <div>
            <h2 style={styles.headline}><span>宽：   </span>1920X...</h2>
           
           <ImageModal pageId={this.state.currentPageId}
                       componentStyles={componentStyles} 
                       componentSetStyle={actions.componentSetStyle.bind(this)}
                         />
                        
          </div>
        </Tab>
        <Tab label="icon图库" value="b">
          <div>
            <h2 style={styles.headline}>Controllable Tab B</h2>
            <p>
             这里是所有可用的图标库
            </p>
          </div>
        </Tab>
      </Tabs>
      </Dialog>
       <WidgetMenu  widget={widget} 
                    open={this.state.widgetMenuOpen}
                    widgetSetConStyle={actions.widgetSetConStyle}
                    widgetSetElementStyle={actions.widgetSetElementStyle}
                    handleWidgetMenuShow={this.handleWidgetMenuShow}
                    />


     </div>
    )
  }



}

Container.propTypes = {
  components:PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

export default Container
